<template>
  <div class="dashboard">
    <div class="warp">
      <h2 class="visual">文章可视化平台</h2>
      <div class="warp-top">
        <pie></pie>
        <maps></maps>
        <lines></lines>
      </div>
      <div class="warp-top">
        <radar></radar>
        <histogram></histogram>
        <articleData></articleData>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import pie from './components/pie.vue'
import maps from './components/maps.vue'
import lines from './components/lines.vue'
import radar from './components/radar.vue'
import histogram from './components/histogram.vue'
import articleData from './components/articleData.vue'
export default defineComponent({
  name: 'Home',
  components: { pie, maps, lines, radar, histogram, articleData },
  setup() {},
})
</script>
<style lang="scss" scoped>
.warp {
  width: 100%;
  height: 100%;
  background: url(../../assets/images/bg.png) no-repeat;
  background-size: cover;
}
.dashboard {
  height: 100%;
}
.visual {
  text-align: center;
  font-size: 24px;
  color: #fff;
  padding-top: 20px;
}
.warp-top {
  display: flex;
  margin-top: 10px;
  height: 380px;
  justify-content: space-around;
}
.pie {
  border: 1px solid #fff;
  border-radius: 5px;
}
</style>
